<template>
  <div class="madp-manager">
    <div class="madp-manager-basic">
      <div class="madp-manager-basic-avater cursor-pointer" @click="chooseImage">
        <img :src="managerInfo.mgrAvatar" alt />
      </div>
      <p class="madp-manager-basic-name">{{ managerInfo.userName }}</p>
    </div>
    <div class="madp-manager-info">
      <div v-for="(item, index) in infoList" :key="item.key" class="madp-manager-info-item" :class="{ 'madp-manager-info-line': index < infoList.length - 1 }">
        <div class="left">
          <img :src="item.img" alt />
          <p>{{ item.label }}</p>
        </div>
        <div class="right">
          <p>{{ managerInfo[item.key] }}</p>
          <!-- <i class="el-icon-arrow-right"></i> -->
        </div>
      </div>
    </div>
    <div class="madp-manager-qualifications">
      <div class="madp-manager-qualifications-title">
        <div>
          <img src="@/assets/img/financialShop/p6.png" alt />
          <p>资质信息</p>
        </div>
        <div>
          <!-- <i class="el-icon-arrow-right"></i> -->
        </div>
      </div>
      <div class="info">
        <div v-for="(item, idx) in managerInfo.qualifications" :key="idx" class="item text-one-ellipsis">
          {{ item }}
        </div>
      </div>
    </div>
    <div class="madp-manager-introduce cursor-pointer">
      <div class="madp-manager-introduce-title">
        <div>
          <img src="@/assets/img/financialShop/p7.png" alt />
          <p>经理介绍</p>
        </div>
        <div>
          <!-- <i class="el-icon-arrow-right"></i> -->
        </div>
      </div>
      <div class="madp-manager-introduce-content">
        <p v-if="isSharePage">{{ managerInfo.intro }}</p>
        <el-input v-else maxlength="300" type="textarea" v-model="managerInfo.intro" @change="saveIntro" :rows="7" placeholder="请输入介绍~~~"></el-input>
      </div>
    </div>
    <back-btn />
  </div>
</template>
<script>
import financialApi from '@/api/financial-shop.js'
import backBtn from '@/components/back-btn.vue'

export default {
  name: 'madp-customer-manager',
  components: { backBtn },
  data() {
    return {
      wxUserId: '',
      isSharePage: '',
      managerInfo: {},
      infoList: [
        {
          label: '员工工号',
          img: require('@/assets/img/financialShop/p1.png'),
          key: 'jobNo'
        },
        {
          label: '职位',
          img: require('@/assets/img/financialShop/p2.png'),
          key: 'postName'
        },
        {
          label: '手机号码',
          img: require('@/assets/img/financialShop/p3.png'),
          key: 'mobile'
        },
        {
          label: '所属机构',
          img: require('@/assets/img/financialShop/p4.png'),
          key: 'orgName'
        },
        {
          label: '地址',
          img: require('@/assets/img/financialShop/p5.png'),
          key: 'orgAddr'
        }
      ]
    }
  },
  created() {},
  activated() {
    this.wxUserId = this.$route.query.wxUserId
    this.isSharePage = this.$route.query.isSharePage || ''
    this.getManageInfo()
  },
  methods: {
    chooseImage() {
      if (this.isSharePage == 1) return
      this.$wxApi.chooseImage(1).then((localIds) => {
        this.$wxApi.uploadImage(localIds[0]).then((mediaId) => {
          financialApi
            .uploadManageAvatar({
              mediaId: mediaId,
              wxUserId: this.wxUserId
            })
            .then((res) => {
              // 更新上级页面中 信息
              this.managerInfo.mgrAvatar = res.data.data.url
              this.$store.commit('updateVuexUpdateManageInfo', true)
            })
        })
      })
    },
    saveIntro() {
      financialApi
        .editManageInfo({
          introText: this.managerInfo.intro,
          wxUserId: this.wxUserId
        })
        .then((res) => {
          // 更新上级页面中 信息
          this.$store.commit('updateVuexUpdateManageInfo', true)
        })
    },
    // 获取经理信息
    getManageInfo() {
      financialApi
        .getManageInfo({
          wxUserId: this.wxUserId
        })
        .then((res) => {
          this.managerInfo = res.data.data
          this.managerInfo.mgrAvatar = this.managerInfo.mgrAvatar || '/mfs/avatar.jpg'
        })
    }
  }
}
</script>
<style scoped lang='scss'>
.madp-manager {
  width: 100%;
  padding: 12px 15px 25px 15px;
  box-sizing: border-box;
  background-image: url('../../assets/img/financialShop/cus-manager-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  font-family: PingFangSC-Medium, PingFang SC;
  min-height: 100vh;
  // overflow-y: scroll;
  .madp-manager-basic {
    width: 100%;
    display: flex;
    &-avater {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      margin-right: 15px;
      border: 0.5px solid rgb(228, 207, 170);
      overflow: hidden;
      img {
        width: 42px;
        height: 42px;
      }
    }
    &-name {
      font-family: PingFangSC-Medium, PingFang SC;
      line-height: 42px;
      color: #2c2c2c;
      font-size: 20px;
      font-weight: 500;
    }
  }
  .madp-manager-info {
    width: 100%;
    margin-top: 15px;
    background: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
    border-radius: 8px;
    padding: 8px 16px;
    box-sizing: border-box;
    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 15px 0;

      div {
        display: flex;
        align-items: center;
      }
      .left {
        margin-right: 30px;
        p {
          font-size: 15px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(44, 44, 44, 0.8);
          white-space: nowrap;
        }
      }
      .right {
        flex: 1;
        justify-content: flex-end;
        p {
          font-size: 15px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2c2c2c;
          text-align: right;
        }
      }

      img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }
    }
    &-line {
      box-shadow: inset 0px -1px 0px 0px rgba(44, 44, 44, 0.1);
    }
  }
  .madp-manager-qualifications {
    width: 100%;
    margin-top: 17px;
    background: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
    border-radius: 8px;
    padding: 16px 8px 16px 16px;
    box-sizing: border-box;
    margin-bottom: 16px;
    &-title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      div {
        display: flex;
        img {
          width: 20px;
          height: 20px;
          margin-right: 8px;
          top: 1px;
          position: relative;
        }
        p {
          font-size: 15px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(44, 44, 44, 0.8);
        }
        .el-icon-arrow-right {
          line-height: 21px;
        }
      }
    }
    .info {
      .item {
        background: #fafafa;
        border-radius: 2px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #202020;
        padding: 10px 16px;
        margin-bottom: 8px;
      }
      :last-child {
        margin-bottom: 0;
      }
    }
  }
  .madp-manager-introduce {
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
    border-radius: 8px;
    padding: 15px 8px 16px 16px;
    box-sizing: border-box;
    &-title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      div {
        display: flex;
        img {
          width: 20px;
          height: 20px;
          margin-right: 8px;
          top: 1px;
          position: relative;
        }
        p {
          font-size: 15px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(44, 44, 44, 0.8);
        }
        .el-icon-arrow-right {
          line-height: 21px;
        }
      }
    }
    &-content {
      padding: 0 21px 0 28px;
      p {
        font-size: 15px;
        font-weight: 400;
        color: #2c2c2c;
        line-height: 21px;
      }
    }
  }
}
</style>
